<%@page import="net.tanesha.recaptcha.ReCaptchaFactory"%>
<%@page import="net.tanesha.recaptcha.ReCaptcha"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<html>
    <head>
        <title>FOOBAR</title>
		<link rel="shortcut icon" href="rsrc/images/book-icon.ico" />
        <style type="text/css">
            @import url(rsrc/css/common.css);
            @import url(rsrc/css/login.css);
            @import url(rsrc/css/register.css);
            @import url(rsrc/css/validationEngine.jquery.css);
        </style>
        <script type="text/javascript" src = "rsrc/js/jquery-latest.js"></script>
        <script type="text/javascript" src = "rsrc/js/jquery.validationEngine-en.js"></script>
        <script type="text/javascript" src = "rsrc/js/jquery.validationEngine.js"></script>
        <script>
            $(document).ready(function(){
                $('#register_form').validationEngine('attach');
            });
        </script>
    </head>
    <body>
        <div class="main-container">
            <div id="top">
                <div><img src="rsrc/images/LOGO.png" height="50" /></div>
                <div>
                    <ul id="navigation" class='hd'>
                        <li><a href=""><span>Home</span></a></li>
                        <li><a href=""><span>About Us</span></a></li>
                    </ul>
                </div>
            </div>
            <div>
                <p>
                    <span class="page-title"></span>
                </p>
                <div class="title-separator"></div>
                <div class="clearfix">
                    <div class="right" id = 'loginDiv'>
                        <span class="page-label">Register Account</span>
			<div class="separator"></div>
			<form id="register_form" action="register_action" method="post" >
                            <table id="register_form_table">
                                <tr>
                                    <td class="label" align="left">Username:</td>
                                    <td align="left"><input type='text'  name ="username" id="username" class="validate[required,minSize[8],maxSize[12] custom[onlyLetterNumber]] input_text" title=""/>*</td>
                                </tr>                    
                                <tr>
                                    <td class="label" align="left">Password:</td>
                                    <td align="left"><input type='password'  name="password" id="password" class="validate[required,minSize[10],maxSize[12]] input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Re-Type Password:</td>
                                    <td align="left"><input type='password'  name="repassword" id="repassword" class="validate[required,equals[password]] input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Email:</td>
                                    <td align="left"><input type='text'  name="email" id="email" class="validate[required,custom[email]] text-input input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">First Name:</td>
                                    <td align="left"><input type='text' name="firstName" id="firstName" class="validate[required], custom[onlyLetterSp]] input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Middle Name</td>
                                    <td align="left"><input type='text' name="midName" id="midName" class="validate[required], custom[onlyLetterSp] input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Last Name</td>
                                    <td align="left"><input type='text' name="lastName" id="lastName" class="validate[required], custom[onlyLetterSp] input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Credit Card Name</td>
                                    <td align="left"><input type='text' name="cardName" id="cardName" class="validate[required, custom [onlyLetterSp]] input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Credit Card Number</td>
                                    <td align="left"><input type='text' name="cardNumber" id="cardNumber" class="validate[required, custom[onlyNumberSp] input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Credit Card Type</td>
                                    <td align="left"><input type='text' name="cardType" id="cardType" class="validate[required] input_text input_text" title=""/>*</td>
                                </tr>
                                <tr>
                                    <td class="label" align="left">Credit Card Exp.Date</td>
                                    <td align="left"><input type='text' name="cardExp" id="cardExp" class="validate[custom[date],future[]] input_text" title=""/>*</td>
                                </tr>          
                            </table>
                            <br/>
                            <table>
                                <tr>
                                     <td class="label" align="left">Captcha Code:</td>
                                    <td align="left">
                                        <%
                                            ReCaptcha c = ReCaptchaFactory.newReCaptcha("6LfdCc4SAAAAAKJ72RfYk_9C4NoTV_lXAncW7Xdj", "6LfdCc4SAAAAAI4p64kJ91fJl4NHEFMULd1ZP4QS", false);
                                            out.print(c.createRecaptchaHtml(null, null));
                                        %>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"></td><td align = "left"><input id='registerCustomer' type='submit' class='gb' value='Submit' name='registerCustomer' /></td>
                                </tr>  
                            </table>
                        <c:if test="${!empty captchaMsg}"><span class="label">${captchaMsg}</span></c:if>
                        <span class="label">Fields with * are required</span>
                    </form>		
                    </div>
                    <div id="left">
                        <div style="height:20px"></div>
                        <a href="login">
                        <div class="left-main-control" >                         
                            Login        
                        </div>
                        </a>
                        <div style="height:20px"></div>
                        
			<div class="left-main-control" style="border-right: 1px solid #fff;">
                            Register
			</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

